<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 卡片头部 -->
            <div slot="header">
                <el-button type="primary" @click="addCate">添加分类</el-button>
            </div>

            <!-- 卡片主体 -->
            <div>
                <!-- 表格区域 -->
                <tree-table :data="cateList" :columns="columns" show-index border :selection-type="false"
                    :expand-type="false">
                    <template slot="cat_deleted" slot-scope="scope">
                        <i class="el-icon-circle-check" v-if="!scope.row.cat_deleted" style="color:#67C23A"></i>
                        <i class="el-icon-circle-close" v-else style="color:#F56C6C"></i>
                    </template>
                    <template slot="cat_level" slot-scope="scope">
                        <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                        <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                        <el-tag size="mini" type="warning" v-else>三级</el-tag>
                    </template>
                    <template slot="operation" slot-scope="scope">
                        <el-button size="mini" type="primary" @click="editCate(scope.row.cat_id)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteCate(scope.row.cat_id, scope.row.cat_name)">
                            删除
                        </el-button>
                    </template>
                </tree-table>

                <!-- 分页 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="cateTotal" background>
                </el-pagination>
            </div>
        </el-card>

        <!-- 添加分类对话框 -->
        <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="30%" :close-on-click-modal="false"
            @close="addCateDialogClose">
            <el-form :model="addCateForm" :rules="addOrEditCateFormRules" ref="addCateFormRef" label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader v-model="cascaderValue" :options="cascaderOpt" :props="cascaderProps"
                        @change="cascaderChange" clearable filterable>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCateSubmit()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑分类对话框 -->
        <el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="30%" :close-on-click-modal="false"
            @close="editCateDialogClose">
            <el-form :model="editCateForm" :rules="addOrEditCateFormRules" ref="editCateFormRef" label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="editCateForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="editCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editCateSubmit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 获取分类列表数据所需参数
            queryInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            // 分类列表
            cateList: [],
            // 分类列表数据总条数
            cateTotal: 0,
            // 表格各列的配置
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name',
                },
                {
                    label: '是否有效',
                    prop: 'cat_deleted',
                    // 表示 将当前列设置为模板列
                    type: 'template',
                    // 表示 当前模板列所使用的模板
                    template: 'cat_deleted'
                },
                {
                    label: '排序',
                    prop: 'cat_level',
                    type: 'template',
                    template: 'cat_level'
                },
                {
                    label: '操作',
                    type: 'template',
                    template: 'operation'
                },
            ],
            // 添加分类对话框的显示与隐藏
            addCateDialogVisible: false,
            // 添加分类表单数据绑定对象
            addCateForm: {
                cat_name: '', // 分类名称
                cat_pid: 0, // 分类父级id
                cat_level: 0 // 分类层级
            },
            // 添加、编辑分类表单验证规则对象
            addOrEditCateFormRules: {
                cat_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 1, max: 11, message: '长度在1到11个字符' },
                    { pattern: /^[^\s]*$/, message: '禁止输入空格', trigger: 'blur' }
                ]
            },
            // 级联选择器的选项数据
            cascaderOpt: [],
            // 级联选择器的配置选项
            cascaderProps: {
                checkStrictly: true, // 次级菜单的展开方式
                label: 'cat_name', // 指定选项标签为选项对象的某个属性值
                value: 'cat_id', // 指定选项的值为选项对象的某个属性值
                children: 'children' // 指定选项的子选项为选项对象的某个属性值
            },
            // 级联选择器双向数据绑定的值
            cascaderValue: [],
            // 编辑分类对话框的显示与隐藏
            editCateDialogVisible: false,
            // 编辑分类表单绑定对象
            editCateForm: {
                cat_name: ''
            },
        }
    },
    created() {
        // 获取分类列表数据
        this.getCateListData();
    },
    methods: {
        // 获取分类列表数据
        async getCateListData() {
            const { data: res } = await this.$http.get('categories', {
                params: this.queryInfo
            });
            if (res.meta.status !== 200) return this.$message.error('分类列表数据获取失败');
            this.cateList = res.data.result;
            this.cateTotal = res.data.total;
        },
        // 处理每页显示条数的变化
        handleSizeChange(val) {
            this.queryInfo.pagesize = val;
            this.getCateListData();
        },
        // 处理当前页码的变化
        handleCurrentChange(val) {
            this.queryInfo.pagenum = val;
            this.getCateListData();
        },
        // 添加分类 按钮
        addCate() {
            // 获取父级分类数据
            this.getParentCateData();
            // 显示添加分类的对话框
            this.addCateDialogVisible = true;
        },
        // 编辑分类 按钮
        editCate(id) {
            // 获取分类名称
            this.getCateName(id);
            // 显示编辑分类的对话框
            this.editCateDialogVisible = true;
        },
        // 获取父级分类数据
        async getParentCateData() {
            const { data: res } = await this.$http.get('categories', {
                params: {
                    type: 2
                }
            });
            if (res.meta.status !== 200) return this.$message.error('父级分类数据获取失败');
            this.cascaderOpt = res.data;
        },
        // 获取分类名称
        async getCateName(id) {
            const { data: res } = await this.$http.get('categories/' + id);
            if (res.meta.status !== 200) return this.$message.error('分类名称获取失败')
            this.editCateForm = res.data;
        },
        // 当级联选择器选项发生变化时触发
        cascaderChange() {
            if (this.cascaderValue.length > 0) {
                this.addCateForm.cat_pid = this.cascaderValue[this.cascaderValue.length - 1];
                this.addCateForm.cat_level = this.cascaderValue.length
            } else {
                this.addCateForm.cat_pid = 0;
                this.addCateForm.cat_level = 0;
            }
        },
        // 监听添加分类对话框的关闭事件
        addCateDialogClose() {
            this.$refs.addCateFormRef.resetFields();
            this.cascaderValue = [];
        },
        // 监听编辑分类对话框的关闭事件
        editCateDialogClose() {
            this.$refs.editCateFormRef.resetFields();
        },
        // 确定 添加分类
        addCateSubmit() {
            this.$refs.addCateFormRef.validate(async valid => {
                if (!valid) return;
                const { data: res } = await this.$http.post('categories', this.addCateForm);
                if (res.meta.status !== 201) return this.$message.error('添加分类失败');
                this.$message.success('添加分类成功');
                this.getCateListData();
                this.addCateDialogVisible = false;
            })

        },
        // 确定 编辑分类
        editCateSubmit() {
            this.$refs.editCateFormRef.validate(async valid => {
                if (!valid) return;
                const { data: res } = await this.$http.put(`categories/${this.editCateForm.cat_id}`, this.editCateForm);
                if (res.meta.status !== 200) return this.$message.error('编辑分类失败');
                this.$message.success('编辑分类成功');
                this.getCateListData();
                this.editCateDialogVisible = false;
            })

        },
        // 删除分类
        deleteCate(id, catName) {
            this.$confirm(`此操作将删除 ${catName} 分类, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: res } = await this.$http.delete('categories/' + id);
                if (res.meta.status !== 200) return this.$message.error('删除分类失败');
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.getCateListData();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style lang="less" scoped>
.el-cascader {
    width: 100%;
}
</style>
